var canvas = document.getElementById('game-canvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('click', function(event) {
	// 处理鼠标点击事件
});

// 创建角色对象
// 定义角色对象
var player = {
	x: 50, // 初始位置 x 坐标
	y: 50, // 初始位置 y 坐标
	vx: 0, // x 方向速度
	vy: 0, // y 方向速度
	width: 30, // 宽度
	height: 30, // 高度
	color: 'blue', // 颜色
	isJumping: false, // 是否正在跳跃
	jumpHeight: 100, // 跳跃高度
	jumpTime: 0, // 跳跃时间
	jumpDuration: 500, // 跳跃持续时间
	jump: function() { // 跳跃方法
		if (!this.isJumping) {
			this.isJumping = true;
			this.jumpTime = Date.now();
		}
	},
	update: function() { // 更新角色位置
		if (this.isJumping) {
			var timeDiff = Date.now() - this.jumpTime;
			if (timeDiff < this.jumpDuration) {
				var jumpProgress = timeDiff / this.jumpDuration;
				this.y = this.y - this.jumpHeight * Math.sin(jumpProgress * Math.PI);
			} else {
				this.isJumping = false;
			}
		}
		this.x = this.x + this.vx;
		this.y = this.y + this.vy;
	},
	draw: function(ctx) { // 绘制角色
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	},
	collideWith: function(obstacle) { // 碰撞检测
		if (this.x < obstacle.x + obstacle.width &&
			this.x + this.width > obstacle.x &&
			this.y < obstacle.y + obstacle.height &&
			this.y + this.height > obstacle.y) {
			return true;
		} else {
			return false;
		}
	}
};

// 定义障碍物对象
var obstacle = {
	x: 300, // 初始位置 x 坐标
	y: 150, // 初始位置 y 坐标
	width: 50, // 宽度
	height: 50, // 高度
	color: 'red', // 颜色
	draw: function(ctx) { // 绘制障碍物
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	},
	collideWith: function(player) { // 碰撞检测
		if (player.x < this.x + this.width &&
			player.x + player.width > this.x &&
			player.y < this.y + this.height &&
			player.y + player.height > this.y) {
			return true;
		} else {
			return false;
		}
	}
};

// 游戏循环
function gameLoop() {
	// 更新角色和障碍物的位置
	player.update();
	obstacle.x -= 5;

	// 绘制游戏画面
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	player.draw(ctx);
	obstacle.draw(ctx);

	// 碰撞检测
	if (obstacle.collideWith(player)) {
		// 角色与障碍物碰撞，游戏结束
		gameOver();
	} else if (obstacle.x < -obstacle.width) {
		// 障碍物已经离开屏幕，重新生成新的障碍物
		obstacle.x = canvas.width + Math.random() * 200;
	} else {
		// 角色成功通过所有障碍物，游戏胜利
		setTimeout(gameWin, 1000);
	}

	// 循环调用游戏循环函数
	requestAnimationFrame(gameLoop);
}

// 游戏初始化
function init() {
	canvas = document.getElementById('game');
	ctx = canvas.getContext('2d');

	// 创建角色和障碍物对象
	player = createPlayer();
	obstacle = createObstacle();

	// 监听键盘事件
	window.addEventListener('keydown', function(event) {
		handleKeyDown(event.keyCode);
	});
	window.addEventListener('keyup', function(event) {
		handleKeyUp(event.keyCode);
	});

	// 启动游戏循环
	requestAnimationFrame(gameLoop);
}

// 游戏结束
function gameOver() {
	// 停止游戏循环
	cancelAnimationFrame(requestID);

	// 显示游戏结束画面
	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.font = '40px Arial';
	ctx.fillStyle = '#FFF';
	ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
}

// 游戏胜利
function gameWin() {
	// 停止游戏循环
	cancelAnimationFrame(requestID);

	// 显示游戏胜利画面
	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.font = '40px Arial';
	ctx.fillStyle = '#FFF';
	ctx.fillText('You Win!', canvas.width / 2 - 100, canvas.height / 2);
}

// 游戏循环
function gameLoop() {
	// 更新角色和障碍物的位置
	player.update();
	obstacle.x -= 5;

	// 绘制游戏画面
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	player.draw(ctx);
	obstacle.draw(ctx);

	// 碰撞检测
	if (obstacle.collideWith(player)) {
		// 角色与障碍物碰撞，游戏结束
		gameOver();
	} else if (obstacle.x < -obstacle.width) {
		// 障碍物已经离开屏幕，重新生成新的障碍物
		obstacle.x = canvas.width + Math.random() * 200;
	} else {
		// 角色成功通过所有障碍物，游戏胜利
		setTimeout(gameWin, 1000);
	}

	// 循环调用游戏循环函数
	requestID = requestAnimationFrame(gameLoop);
}